<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./static/assets/logo.png" />
    <title>公安官网</title>
</head>

<body>
    <div class="homePage" id="homePage">
        <div class="content">
            <div class="logo">
                <img id="homePageLogo" src="" alt="">
            </div>
            <div class="moduel">
                <video id="videoPlayer" controls></video>
                <div id="textModuel" class="textModuel">
                    <div class="scroll-container">
                        <div id="scrollText" class="scroll-text">
                        </div>
                    </div>
                </div>
                <!-- <button id="pauseBtn">暂停</button>
                <button id="resumeBtn">恢复</button>
                <button id="speedUpBtn">加速</button>
                <button id="speedDownBtn">减速</button> -->
            </div>
        </div>
        <div class="btn goHomePage" id="goHomePage">进入首页 →</div>
    </div>
</body>

</html>
<link rel="stylesheet" href="./static/css/index.css">
<script src="./static/js/baseUrl.js"></script>
<script src="./static/api/request.js"></script>
<script>
    ajax('GET', 'portalWebsite/homepage/queryLoadPage', null, function (res) {
        var data = res.data || {}
        //console.log(data, res)
        var backgroundImage = data.backgroundImage ? `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${data.backgroundImage}` : ''
        var filesId = data.filesId ? `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${data.filesId}` : '';
        var logoUrl = data.logo ? `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${data.logo}` : '';
        var content = data.content || '';
        backgroundImage&&(document.getElementById('homePage').style.backgroundImage = `url(${backgroundImage})`)
        document.getElementById('homePageLogo').src = logoUrl;
        var video = document.getElementById('videoPlayer');
        var textModuel = document.getElementById('textModuel');
        if (filesId) {
            textModuel.style.display = 'none'
            video.src = 'filesId';
            video.play(); // 自动播放视频 
        } else if (content) {
            video.style.display = 'none'
            document.querySelector('.scroll-text').innerHTML = content
            const scrollText = document.querySelector('.scroll-text');
            const scrollContainer = document.querySelector('.scroll-container');
            if ((scrollContainer.clientHeight - scrollText.clientHeight) > 0) {
                scrollText.style.animationPlayState = 'running';
                scrollText.style.animationPlayState = 'paused';
                //console.log(scrollText.clientHeight, scrollContainer.clientHeight)
            }
        } else {
            window.location.href = "./static/page/homePage.html";
        }
    })
    function initData() {
        document.getElementById("goHomePage").addEventListener("click", function () {
            window.location.href = "./static/page/homePage.html";
        });
        // document.addEventListener('DOMContentLoaded', function () {
        //     const scrollText = document.querySelector('.scroll-text');
        //     const scrollContainer = document.querySelector('.scroll-container');
        //     let animationDuration = 10; // 初始滚动时间为10秒  

        //     document.getElementById('pauseBtn').addEventListener('click', function () {
        //         scrollText.style.animationPlayState = 'paused';
        //     });

        //     document.getElementById('resumeBtn').addEventListener('click', function () {
        //         scrollText.style.animationPlayState = 'running';
        //     });

        //     document.getElementById('speedUpBtn').addEventListener('click', function () {
        //         animationDuration -= 2; // 每次点击加速按钮，滚动时间减少2秒  
        //         if (animationDuration < 1) animationDuration = 1; // 设置最小滚动时间为1秒  
        //         scrollText.style.animationDuration = `${animationDuration}s`;
        //     });

        //     document.getElementById('speedDownBtn').addEventListener('click', function () {
        //         animationDuration += 2; // 每次点击减速按钮，滚动时间增加2秒  
        //         scrollText.style.animationDuration = `${animationDuration}s`;
        //     });
        // });
    };
    initData()
</script>
<style>
    .homePage {
        height: 100vw;
        height: 100vh;
        background-color: #cecece;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .homePage .content {
        width: 60%;
        height: 100%;
        margin: 0 auto;
        padding: 10vh 0;
    }

    .homePage .goHomePage {
        height: 60px;
        padding: 0 50px;
        border-radius: 30px;
        background-color: #0b72cd;
        position: absolute;
        bottom: 20px;
        right: 30px;
        box-shadow: 0 0 20px 10px #00000006;
        text-align: center;
        line-height: 60px;
        font-size: 18px;
        color: #ffffff;
        cursor: pointer;
        transition: all 0.3s;
    }

    .homePage .goHomePage:hover {
        transform: translateX(10px);
    }

    .homePage #homePageLogo {
        height: 70px;
    }

    .homePage .textModuel {
        height: calc(80vh - 120px);
        margin: 20px 0;
        padding: 20px;
        background-color: #ffffffe0;
        border-radius: 20px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-shadow: 0 0 20px 16px #00000019;
        box-shadow: 0 0 20px 16px #00000019;
    }

    .homePage #videoPlayer {
        height: calc(80vh - 120px);
        width: 100%;
    }

    .scroll-container {
        height: calc(80vh - 160px);
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .scroll-text {
        position: absolute;
        width: 100%;
        white-space: wrap;
        animation: scroll 10s linear infinite;
    }

    @keyframes scroll {
        0% {
            top: 2%;
        }

        100% {
            top: -100%;
        }
    }
</style>